<!-- #layout name=blank-->
<div id="app">
  <div class="page-header">
    <h1 class="title">CSS optimization</h1>
  </div>
  <kb-breadcrumb :breads="breads"></kb-breadcrumb>

  <div class="navbar navbar-default">
    <div class="container-fluid">
      <a class="btn green navbar-btn" @click="onScan">Scan</a>
      <a
        class="btn red navbar-btn"
        v-show="selectedRows.length>0"
        @click="onDelete"
        >Delete</a
      >
    </div>
  </div>

  <kb-table :data="list" show-select :selected.sync="selectedRows">

      <kb-table-column width="150px" :label="Kooboo.text.common.name">
          <template v-slot="row">
              <span @click.stop="">{{ row.styleSheet }}</span>
          </template>
      </kb-table-column>

      <kb-table-column :label="Kooboo.text.common.Content">
          <template v-slot="row">
              <span @click.stop="">{{ row.content }}</span>
          </template>
      </kb-table-column>  

  </kb-table>
</div>
<script>
  Kooboo.loadJS([
    "/_Admin/Scripts/components/kbBreadcrumb.js",
    "/_Admin/Scripts/components/kbTable.js",
  ]);

  new Vue({
    el: "#app",
    data: function () {
      return {
        breads: [
          {
            name: "SITES",
          },
          {
            name: "DASHBOARD",
          },
          {
            name: Kooboo.text.common.cssOptimization,
          },
        ],
        list: [],
        selectedRows: [],
      };
    }, 
    methods: {
      onDelete() {
        Kooboo.CssOptimization.Delete(this.selectedRows.map((m) => m.id)).then(
          (rsp) => {
            if (!rsp.success) return;
            this.onScan();
          }
        );
      },
      onScan() {
        Kooboo.CssOptimization.getList().then((rsp) => {
          if (!rsp.success) return;
          this.list = rsp.model;
        });
      },
    },
  });
</script>
